<style>
.btn-expand {
    position: relative;
    background: #03A9F4;
    color: #fff;
    margin: 1rem;
}
.btn-expand:after {
    position: absolute;
    top: -1rem;
    right: -1rem;
    bottom: -1rem;
    left: -1rem;
    display: block;
    content: ' ';
    transition: .3s cubic-bezier(.175, .885, .32, 1);
    transform: scale(.6);
    opacity: 0;
    background-color: transparent;
    box-shadow: 0 0 0 .05rem #000;
}
.btn-expand:hover:after,
.btn-expand.hover:after {
    transform: scale(1);
    opacity: .15;
    background-color: #000;
}
.btn-expand:focus {
    outline: none;
}
.btn-expand:focus:after {
    transform: scale(1);
    opacity: .2;
    background-color: rgba(0, 0, 0, .8);
    box-shadow: inset 0 0 0 .05rem rgba(0, 0, 0, .9);
}
</style>
<div class="content">
  <div class="list">
    <div class="item">
      <div class="content">
        <div><button type="button" class="btn btn-expand">点我的周围也有效</button></div>
        <div><pre class="prettyprint"><code>&lt;button type=&quot;button&quot; class=&quot;btn btn-expand&quot;&gt;&#x6309;&#x94ae;&lt;/button&gt;</code></pre></div>
        <div><pre class="prettyprint"><code>.btn-expand {
    position: relative;
    background: #03A9F4;
    color: #fff;
    margin: 1rem;
}
.btn-expand:after {
    position: absolute;
    top: -1rem;
    right: -1rem;
    bottom: -1rem;
    left: -1rem;
    display: block;
    content: ' ';
    transition: .3s cubic-bezier(.175, .885, .32, 1);
    transform: scale(.6);
    opacity: 0;
    background-color: transparent;
    box-shadow: 0 0 0 .05rem #000;
}
.btn-expand:hover:after,
.btn-expand.hover:after {
    transform: scale(1);
    opacity: .15;
    background-color: #000;
}
.btn-expand:focus {
    outline: none;
}
.btn-expand:focus:after {
    transform: scale(1);
    opacity: .2;
    background-color: rgba(0, 0, 0, .8);
    box-shadow: inset 0 0 0 .05rem rgba(0, 0, 0, .9);
}</code></pre></div>
      </div>
     </div>
  </div>
</div>
